<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="common.css">
    <style>
    </style>
</head>
<body>
<div class="mod_header" role="header">
    <div class="section_inner">
        <h1 class="qqmusic_title">
            <a aria-current="page" class="active" href="#"
            ><img
                    src="https://y.qq.com/mediastyle/yqq/img/logo.png"
                    alt="QQ音乐"
                    class="qqmusic_logo"
            /></a>
        </h1>
        <ul class="mod_top_nav" role="nav">
            <li class="top_nav__item">
                <a
                        aria-current="page"
                        class="top_nav__link top_nav__link--current"
                        title="音乐馆"
                        href="#"
                >音乐馆</a
                >
            </li>
            <li class="top_nav__item">
                <a class="top_nav__link" title="我的音乐" href="#"
                >我的音乐</a
                >
            </li>
            <li class="top_nav__item top_nav__item--subnav">
                <a
                        href="#"
                        class="top_nav__link"
                        title="客户端"
                        rel="noopener noreferrer"
                        target="_blank"
                >客户端</a
                ><img
                    src="https://y.qq.com/mediastyle/yqq/extra/mark_1.png"
                    class="top_nav__mark"
                    alt="抢特权"
            />
                <div class="popup_data_detail client_privilege">
                    <div class="popup_data_detail__cont">
                        <p>
                            <i class="client_privilege__icon client_privilege__icon--hq"></i
                            >HQ高品质 全员开启
                        </p>
                        <p>
                            <i class="client_privilege__icon client_privilege__icon--dts"></i
                            >独家音效 全面升级
                        </p>
                        <p>
                            <i class="client_privilege__icon client_privilege__icon--skin"></i
                            >轻盈视觉 动态皮肤
                        </p>
                        <a class="client_privilege__btn">下载体验</a>
                    </div>
                </div>
            </li>
            <li class="top_nav__item">
                <a
                        href="#"
                        class="top_nav__link"
                        title="开放平台"
                        rel="noopener noreferrer"
                        target="_blank"
                >开放平台</a
                >
            </li>
            <li class="top_nav__item">
                <a
                        href="#"
                        class="top_nav__link"
                        title="VIP"
                        rel="noopener noreferrer"
                        target="_blank"
                >VIP</a
                >
            </li>
        </ul>
        <ul class="mod_top_subnav">
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="首页" href="#">首页</a>
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="歌手" href="#"
                >歌手</a
                >
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="新碟" href="#">新碟</a>
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="排行榜" href="#"
                >排行榜</a
                >
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="分类歌单" href="#"
                >分类歌单</a
                >
            </li>
            <li class="top_subnav__item">
                <a
                        href="#"
                        class="top_subnav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                >电台</a
                >
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" href="#">MV</a>
            </li>
            <li class="top_subnav__item">
                <a class="top_subnav__link" title="数字专辑" href="#"
                >数字专辑</a
                >
            </li>
            <li class="top_subnav__item">
                <a
                        href="#"
                        class="top_subnav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                >票务</a
                >
            </li>
        </ul>
        <div class="mod_top_search" role="search">
            <div class="mod_search_input">
                <input
                        type="text"
                        class="search_input__input"
                        placeholder="搜索音乐、MV、歌单、用户"
                        value=""
                /><button class="search_input__btn">
                <i class="icon_search sprite"></i><span class="icon_txt">搜索</span>
            </button>
            </div>
            <div class="mod_search_result"></div>
            <div class="mod_search_other">
                <div class="search_hot">
                    <dl class="search_hot__list">
                        <dt class="search_hot__tit" id="search_hot__tit">热门推荐</dt>
                        <dd>
                            <a class="search_hot__link"
                            ><span class="search_hot__number">1</span
                            ><span class="search_hot__name">我们的歌 </span
                            ><span class="search_hot__listen">76.6万</span></a
                            >
                        </dd>
                        <dd>
                            <a class="search_hot__link"
                            ><span class="search_hot__number">2</span
                            ><span class="search_hot__name">冰雪奇缘2 </span
                            ><span class="search_hot__listen">58.7万</span></a
                            >
                        </dd>
                        <dd>
                            <a class="search_hot__link"
                            ><span class="search_hot__number">3</span
                            ><span class="search_hot__name">张杰 </span
                            ><span class="search_hot__listen">32.4万</span></a
                            >
                        </dd>
                        <dd>
                            <a class="search_hot__link"
                            ><span class="search_hot__number">4</span
                            ><span class="search_hot__name">桥边姑娘 </span
                            ><span class="search_hot__listen">28.8万</span></a
                            >
                        </dd>
                        <dd>
                            <a class="search_hot__link"
                            ><span class="search_hot__number">5</span
                            ><span class="search_hot__name">星辰大海 </span
                            ><span class="search_hot__listen">20.3万</span></a
                            >
                        </dd>
                    </dl>
                </div>
                <div class="search_history">
                    <dl class="search_history__list">
                        <dt class="search_history__tit">
                            历史搜索<a class="search_history__clear"
                        ><i class="icon_history_clear"></i
                        ><span class="icon_txt">清空</span></a
                        >
                        </dt>
                        <dd class="search_history__item">
                            <a class="search_history__link"></a
                            ><a class="search_history__delete"
                        ><i class="search_history__icon_delete"></i
                        ><span class="icon_txt">删除</span></a
                        >
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="header__opt">
      <span class="mod_top_login"
      ><a class="top_login__link">登录</a>
        <div class="mod_select mod_select_green mod_select--open">
          <a class="select__choose">开通VIP</a>
          <ul class="select__box">
            <li
                    class="select__item"
                    title="开通绿钻豪华版"
                    data-aid="music.pc.20316.newyqqtop"
                    data-stat="music.20316.btnclick.pc"
            >
              开通绿钻豪华版
            </li>
            <li
                    class="select__item"
                    title="开通付费包"
                    data-aid="music.pc.20317.newyqqtop"
                    data-stat="music.20317.btnclick.pc"
            >
              开通付费包
            </li>
          </ul>
        </div>
        <div class="mod_select mod_select--pay">
          <a class="select__choose">充值</a>
          <ul class="select__box">
            <li
                    class="select__item"
                    title="乐币用途： 用于购买数字专辑、支持明星打榜、TME Live等"
            >
              购买乐币
            </li>
            <li
                    class="select__item"
                    title="饭票用途： 用于在直播中赠送礼物、开通粉丝团、购买贵族等"
            >
              充值饭票
            </li>
          </ul>
        </div></span
      >
        </div>
    </div>
</div>

</body>
</html>